<template>
  <div class="report-wrapper user-conversion">
    <div class="main-hd">
      <h2>用户转化</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <div class="search-con">
          <DatePicker
            type="daterange"
            v-model="selectDate"
            format="yyyy-MM-dd"
            placeholder="请选择日期"
            style="width: 200px;"
            :options="disDate"
            @on-change="handleDatePicker"
          ></DatePicker>
          <Select class="search-col" placeholder="请选择渠道" v-model="platformId" filterable>
            <Option
              v-for="(item, index) in channelList"
              :value="item.id"
              :key="index"
            >{{ item.platformName }}</Option>
          </Select>
          <Select v-model="investorId" style="width: 200px;" class="search-col" filterable>
            <Option
              v-for="(item, index) in investorList"
              :key="index"
              :value="item.investorId">{{ item.investorName }}</Option>
          </Select>
        </div>
        <div class="table-con">
          <h3 class="table-title">用户转化汇总</h3>
          <Table border :columns="utColumns" :data="utList" :loading="utLoading" @on-sort-change="handleSortChange"></Table>
          <div class="expand-more" @click="handleExpand" v-if="!utLoading && platformId == -1">
            <Icon type="ios-arrow-down" v-show="!expand" />
            <Icon type="ios-arrow-up" v-show="expand" />
            <span>{{ expand ? '收起' : '展开' }}</span>
          </div>
        </div>
        <div class="table-con">
          <h3 class="table-title">每日用户转化详情</h3>
          <Table border :columns="udColumns" :data="udList" :loading="udLoading"></Table>
          <Page
            :total="total"
            :current.sync="page"
            :page-size-opts="[10, 20, 40, 80, 100]"
            show-total
            show-elevator
            show-sizer
            @on-change="handleCurrentChange"
            @on-page-size-change="handleSizeChange"
          ></Page>
        </div>
        <Button type="primary" @click="exportData" style="margin-top: 10px;" v-if="type != 16">
          <Icon type="ios-download-outline"></Icon> 导出数据
        </Button>
      </div>
    </div>
  </div>  
</template>

<script>
  import mixin from '../report/mixin';
  import qs from 'qs';
  import { mapGetters } from 'vuex';

  export default {
    name: 'userData',
    mixins: [ mixin ],
    data () {
      return {
        expand: false,
        sort: false,
        platformId: -1,
        investorId: '',
        selectDate: [],
        beginDate: '',
        endDate: '',
        channelList: [], // platform list
        utTotal: [],
        utSubList: [],
        investorList: [],
        utList: [], // user transfer list
        udList: [], // user detail list
        utColumns: [
          { title: '渠道', key: 'platformName' },
          { title: '注册页UV', key: 'uvCnt', sortable: true },
          { title: '注册数', key: 'registerCnt', sortable: true },
          { title: '登录数', key: 'loginCnt', sortable: true },
          { title: '完成OCR数', key: 'finishOcrCnt', sortable: true },
          { title: '完成通讯录数 ', key: 'finishConcatCnt', sortable: true },
          { title: '完成运营商数', key: 'finishCarrierCnt', sortable: true },
          { title: '完成活体数', key: 'finishLivingCnt', sortable: true },
          { title: '完成绑卡数', key: 'finishBindingCardCnt', sortable: true },
          { title: '通过数', key: 'applySuccessCnt', sortable: true },
          { title: '放款数', key: 'orderCnt', sortable: true }
        ],
        utLoading: true,
        udLoading: true,
        udColumns: [
          { title: '日期', key: 'date' },
          { title: '注册页uv', key: 'uvCnt' },
          { title: '注册数', key: 'registerCnt' },
          { title: '登录数', key: 'loginCnt' },
          { title: '完成OCR数', key: 'finishOcrCnt' },
          { title: '完成通讯录数 ', key: 'finishConcatCnt' },
          { title: '完成运营商数', key: 'finishCarrierCnt', sortable: true },
          { title: '完成活体数', key: 'finishLivingCnt', sortable: true },
          { title: '完成绑卡数', key: 'finishBindingCardCnt', sortable: true },
          { title: '通过数', key: 'applySuccessCnt' },
          { title: '放款数', key: 'orderCnt' }
        ],
        pageSize: 10,
        page: 1,
        total: 0,
        disDate: {
					disabledDate (date) {
						return date && date.valueOf() > Date.now();
					}
				}
      }
      
    },
    created () {
      this.getAllInverstorList();
      this.getPlatformList();
    },
    computed: {
      ...mapGetters([
				'type'
			]),
    },
    watch: {
      platformId (newVal, oldVal) {
        if (newVal == -1) {
          this.expand = false;
        }
        
        this.handleFilter();
      },
      investorId (newVal, oldVal) {
        if (newVal !== '') {
          this.handleFilter();
        }
			}
    },
    methods: {
      // 获取渠道
      getAllInverstorList () {
        this.$http.post('/helsinki/admin/investor/getAllInvestorList')
        .then(({ data: { data, errcode, info } }) => {
          if (errcode === 0) {
            this.investorList = data.list;
            if (this.investorList.length == 1) {
              this.investorId = this.investorList[0].investorId;
            } else {
              this.investorId = -1;
            }
          }
        }, error => {
          console.log(error);
        });
      },
      getPlatformList () {
        this.$http.post('/helsinki/admin/daoliu/getAllPlatforms')
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.channelList = data.list;
          }
        }, error => {
          console.log(error);
        })
      },
      // 获取用户转化汇总
      getUserTransferList () {
        this.$http.post('/helsinki/admin/report/getUserTransferList?version=2', {
          platformId: this.platformId,
          beginDate: this.beginDate,
          endDate: this.endDate,
          investorId: this.investorId
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            let total = data.total
            this.utTotal = [total];
            this.utSubList = data.list;
            if (this.platformId == -1) {
              this.utList = this.utTotal;
              this.expand = false;
            } else {
              this.utList = this.utSubList;
              this.expand = true;
            }
          }
          this.utLoading = false;
        }, error => {
          console.log(error);
        });
      },
      // 获取每日用户转化详情
      getUserTransferDetail () {
        this.$http.post('/helsinki/admin/report/getUserTransferDetail?version=2', {
          platformId: this.platformId,
          beginDate: this.beginDate,
          endDate: this.endDate,
          page: this.page,
          pageSize: this.pageSize,
          investorId: this.investorId
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.udList = data.list;
            this.total = data.size;
          } else {
            this.udList = [];
            this.total = 0;
          }
          this.udLoading = false;
        }, error => {
          console.log(error);
        })
      },
      handleSortChange (params) {
        if (this.platformId === -1) {
          if (this.expand) return;
          this.expand = true;
          this.utList = this.expand ? this.utList.concat(this.utSubList) : this.utTotal;
        }
      },
      handleDatePicker (val) {
        if (this.platformId == -1) { this.expand = false };
        if (Array.isArray(val)) {
          this.beginDate = val[0];
          this.endDate = val[1];
          this.selectDate = val;
        } else {
          this.beginDate = '';
          this.endDate = '';
          this.selectDate = [];
        }
        this.handleFilter();
      },
      handleFilter () {
        this.utLoading = true;
        this.udLoading = true;
        this.page = 1;
        this.getUserTransferList();
        this.getUserTransferDetail();
      },
      // 展开/收起
      handleExpand () {
        this.expand = !this.expand;
        this.utList = this.expand ? this.utList.concat(this.utSubList) : this.utTotal;
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.udLoading = true;
        this.page = val;
        this.getUserTransferDetail();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.udLoading = true;
        this.pageSize = val;
        this.getUserTransferDetail();
      },
      // 导出用户数据汇总Excel
      exportData (type) {
        let params = qs.stringify({
          platformId: this.platformId,
          investorId: this.investorId,
          beginDate: this.beginDate,
          endDate: this.endDate,
          methods: ['getUserTransferV2List', 'getUserTransferV2Detail'],
          includeFields: [
            this.filterArray(this.utColumns),
            this.filterArray(this.udColumns)
          ]
        });
        location.href = `/helsinki/admin/report/export-excel?${params}`;
      },
      handleReset () {
        this.selectDate = [];
        this.beginDate = '';
        this.endDate = '';
        this.platformId = -1;
        this.investorId = -1;
        this.expand = false;
        this.handleFilter();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../report/styles/common.scss";
</style>
